<template>
  <view class="oto-input" :style="[customStyle]">
    <input
      :disabled="disabled"
      :placeholder="placeholder"
      :placeholder-style="getPlaceholderStyle"
      :type="type"
      :value="value"
      @input="input"
      @confirm="doConfirm"
      class="input"
      v-show="!show"
      :maxlength="maxlength"
      :adjust-position="adjustPosition"
      :focus="focus"
      :auto-blur="autoBlur"
      @keyboardheightchange="keyboardheightchange"
      @blur="blur"
      :confirm-type="confirmType"
    />
    <view v-show="show" class="input">{{ value }}</view>
  </view>
</template>

<script>
  import * as otoUtils from '@/components/utils/index';

  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请填写'
      },
      // text-align: center;
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      placeholderStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      show: {
        type: Boolean,
        default: false
      },
      maxlength: {
        type: Number,
        default: 140
      },
      focus: {
        type: Boolean,
        default: false
      },
      autoBlur: {
        type: Boolean,
        default: false
      },
      adjustPosition: {
        type: Boolean,
        default: false
      },
      confirmType: {
        type: String,
        default: 'done'
      }
    },
    computed: {
      getPlaceholderStyle() {
        const placeholderStyle = this.placeholderStyle || {};
        let placeholderStyleStr = '';
        Object.keys(placeholderStyle).map((key) => {
          placeholderStyleStr += `${key.replace(/[A-Z]/g, (item) => `-${item.toLowerCase()}`)}: ${
            placeholderStyle[key]
          };`;
        });
        return placeholderStyleStr;
      }
    },
    mounted() {
      this.$otoFormItem = otoUtils.$parent(this, 'OtoFormItem');
    },
    methods: {
      input(e) {
        this.$emit('oto-input', e);
        this.$emit('input', e.detail.value);
        if (this.$otoFormItem) {
          this.$otoFormItem.validate({ event: e, value: e.detail.value });
        }
      },
      doConfirm(e) {
        this.$emit('confirm', e);
      },
      keyboardheightchange(e) {
        this.$emit('keyboardheightchange', e);
      },
      blur(e) {
        this.$emit('blur', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-input {
    height: 62rpx;
    left: 55rpx;
    top: 360rpx;
    color: rgba(70.13, 70.13, 70.13, 1);
    background-color: rgba(245, 245, 245, 1);
    border-radius: 12rpx;
    font-size: 28rpx;
    line-height: 150%;
    padding-left: 18rpx;
    .input {
      width: 100%;
      height: 100%;
      font-size: 24rpx;
    }
  }
</style>
